<template>
  <div id="userList">
    <div class="title">
       <p> {{fromData.companyName}}</p>
      <el-button size="medium" class="bot back" icon="el-icon-back" @click="backFn()">返回</el-button>
    </div>

    <div class="sech clearfix" :UserListData="UserListData">
    <div class="left clearfix">
      <div class="left complete" style="margin-top: 15px;margin-right: 10px" :updateStatusData="updateStatusData">
        <el-autocomplete   style="width: 270px"
                           class="inline-input"
                           v-model="fromData.originText"
                           :fetch-suggestions="querySearch"
                           value-key="value"
                           value = 'id'
                           placeholder="车站/车站代码"
                           @select="handleSelect"
                           @focus="checkCity(1)"
        >
          <span slot="prepend" style="background:none;border: none">起运地</span>
        </el-autocomplete>
      </div>
      <div class="left complete" style="margin-top: 15px;margin-right: 10px" :updateStatusData="updateStatusData">
        <el-autocomplete   style="width: 270px"
                           class="inline-input"
                           v-model="fromData.destinationText"
                           :fetch-suggestions="querySearch2"
                           value-key="value"
                           value = 'id'
                           placeholder="车站/车站代码"
                           @select="handleSelect2"
                           @focus="checkCity(2)"
        >
          <span slot="prepend" style="background:none;border: none">起运地</span>
        </el-autocomplete>
      </div>
      <div class="left complete" style="margin-top: 15px;margin-right: 10px;width: 100px" :updateStatusData="updateStatusData">
        <el-select v-model="fromData.transStatus" clearable placeholder="请选择" style="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="languageData.id=='Chinese'?item.label:item.label2"
            :value="item.value" >
          </el-option>
        </el-select>
      </div>
      <div class="left" style="margin-top: 15px;" :updateStatusData="updateStatusData">
        <el-input class="saechIput"  v-model="fromData.deviceNumber" :placeholder="languageData.public.container" clearable></el-input>
        <el-button type="primary" class="saechBout"  icon="el-icon-search"  v-on:click="saechFn(1)"> </el-button>
      </div>
    </div>

      <div class="tableBox" style="clear: both;">
        <p style="line-height: 25px;font-size: 12px;text-align: right;"> {{'共搜索到'+count+'条'}}</p>
        <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" :row-style="style1"  :header-row-style="style2">
          <el-table-column prop="da" label=" " width="20">
          </el-table-column>
          <el-table-column prop="origin" :label="languageData.public.departure" >
            <template slot-scope="scope">
              <span>
                {{languageData.id=='Chinese'?scope.row.origin:scope.row.originEN}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="destination" :label="languageData.public.desitnation" >
            <template slot-scope="scope">
              <span>
                {{languageData.id=='Chinese'?scope.row.destination:scope.row.destinationEN}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceNumber" :label="languageData.public.container" >
          </el-table-column>
          <el-table-column prop="transStatus" :label="languageData.admin.status" >
          </el-table-column>
        </el-table>
      </div>
      <div class="cleae" style="text-align: right;padding-right: 20px;padding-top: 20px;margin-bottom: 40px">
        <el-pagination layout="prev, pager, next" :page-count="page.count" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="languageData.admin.DeleteAccount" :visible.sync="dialogVisible2" width="30%" ><span>{{languageData.admin.DeleteAccount}}?</span><span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">{{languageData.public.cancel}}</el-button>
    <el-button type="primary" @click="delFn">{{languageData.public.done}}</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .ditles{margin-right: 20px;color: #00a2d4;cursor: pointer}
  #userList{max-width: 1690px;padding-top: 25px;text-align: left}
  .saechIput{width:200px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .title{position: relative;width: 100%;border-bottom: 1px solid #e1e1e1}
  .title p{text-align: center;line-height: 40px;font-size: 16px;font-weight: bold}
  .bot{ width: 90px;text-align: center;}
  .back{position: absolute;left: 0px;top: 0px;}
  .check{background-color: #0d71b7;margin-right: 60px;}
  .success-row {  background: #d9dddd;  }
  .tableBox{width: 100%;min-height: 200px;margin-top: 0px;}
  .clickBot{cursor: pointer;}
  .clickBot:hover{color:#409eff }

</style>
<script>
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import Public from '../../vuex/public.js'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-usrList',
    created () {
      // 查看本页面路由 绑定对应页面class
        this.companyId = parseInt(this.$route.query.id)
      this.fromData.companyName = this.$route.query.companyName
    },
    data () {
      // 自定义密码校验

      var indeofPassword2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('confirm password'));
        } else if (value !== this.fromData.password) {
          callback(new Error('Your new passwords do not match!'));
        } else {
          callback();
        }
      };
      return {
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员'
        },
        userSaech: null,
        count:0,
        page:{
          page: 1,
          pageSize: 10,
          count: 1
        },
        dialogFormVisible: null,
        dialogVisible2: false,
        tableData2: [{
          origin: 'No Data',
          destination: 'No Data',
          deviceNumber: 'No Data',
          creatTmie: 'No Data'
        }],
        style1: {height: '70px'},
        style2: {height: '70px', border: 'none 0px', background: '#d9dddd', 'margin-top': '25px'},
        companyName:'',
        fromData: {
          companyName:'',
          companyId:'',
          originText:'',
          origin:'',
          destination:'',
          destinationText:'',
          deviceNumber:'',
          transStatus:''
        },
        labelPosition: 'left',
        options: [{
          value: 0,
          label: '运输中',
          label2: 'In transit',
        }, {
          value: 1,
          label: '运输完成',
          label2: 'Finished',
        }, {
          value: 2,
          label: '异常',
          label2: 'error',
        }]
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        restaurant:[],
        statisticsTransOrder: 'statisticsTransOrder',
        resetPassword: 'resetPassword',
        updateLevel:'updateLevel',

      }),
      querySearch(queryString, cb) {
        var restaurants = this.restaurant;
        var results = queryString ? restaurants.filter(this.createCiTYfiter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createCiTYfiter(queryString){
        return (restaurant) => {
          var str =JSON.stringify(restaurant.cityCN)
          str +=JSON.stringify(restaurant.stationCN)
          str +=JSON.stringify(restaurant.stationEN)
          str +=JSON.stringify(restaurant.cityCN)
          str +=JSON.stringify(restaurant.cityEn)
          str +=JSON.stringify(restaurant.citySX)
          var s = restaurant.stationCN? (' / '+ restaurant.stationCN +' / '+ restaurant.code ):''
          restaurant.value = restaurant.countryCN +' / '+ restaurant.cityCN+s

          if(str.toLowerCase().indexOf(queryString.toLowerCase()) > -1){


          }
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        // this.shech1 = item.id;
        console.log(item)
        this.fromData.origin = item.id
      },
      querySearch2(queryString, cb) {
        if(this.shech2 != queryString){
          //  this.fromData.dest = '';this.fromData.destSite = '' ;
        }
        var restaurants = this.restaurant
        var results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter2(queryString) {
        return (restaurant ) => {
          // 先查
          var str = JSON.stringify(restaurant.code)
          str +=JSON.stringify(restaurant.stationCN)
          str +=JSON.stringify(restaurant.stationEN)
          str +=JSON.stringify(restaurant.cityCN)
          str +=JSON.stringify(restaurant.cityEn)
          str +=JSON.stringify(restaurant.citySX)
          restaurant.value = restaurant.countryCN+' / '+restaurant.stationCN +' / '+ restaurant.code
          restaurant.all == 'stion'
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect2(item) {
        this.fromData.destination = item.id
      },
      checkCity(a,value){
        if(a==1){
          this.fromData.originText = '';
          this.fromData.origin = ''
        }
        if(a==2){
          this.fromData.destinationText = ''
          this.fromData.destination = ''
        }
      },
      goChart(row,name){
        console.log(row.companyId)
        //this.$router.push({ name:name ,query: {id: row.companyId,name:row.companyName}})
      },
      tableRowClassName ({row, rowIndex}) {
        var x = rowIndex % 2
        if (x === 0) {
          return ''
        } else if (x === 1) {
          return 'success-row'
        }
        return ''
      },
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.saechFn()
      },
      login () {
        this.$router.push({ name: "map" })
      },
      saechFn(a){
        if(a){
          this.page.page = 1
        }
        var parm = {
          companyId:this.companyId,
          origin:this.fromData.origin,
          destination:this.fromData.destination,
          deviceNumber:this.fromData.deviceNumber,
          transStatus:this.fromData.transStatus,
          page: this.page.page,
          pageSize: this.page.pageSize,
        }
        this.statisticsTransOrder(parm)
      },
      // 解析公司统计分析列表
      userListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          this.count =cunt
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []

        for (let i in res) {
          var origin = {stationEN:'',stationCN:''},destination={stationEN:'',stationCN:''}
          if(res[i].origin){
            origin = Public.publicLo.getCityById(res[i].origin)
          }
          if(res[i].destination){
            destination = Public.publicLo.getCityById(res[i].destination)
          }
          var pu = { //
            origin: origin.stationCN,
            originEN: origin.stationEN,
            destination: destination.stationCN,
            destinationEN: destination.stationEN,
            deviceNumber: res[i].deviceNumber,
            transStatus:res[i].transStatus == 0?'运输中':res[i].transStatus == 1?'运输完成':res[i].transStatus == 2?'异常':'异常'
          }
          this.tableData2.push(pu)
        }
      },
      // 操作
      handleEdit (index, row) {
        this.dialogFormVisible = true;
        this.fromData.password = ''
        this.fromData.passwordTow = ''
        this.fromData.userId = row.userId
      },
      // 取消
      resetFields(){
        this.dialogFormVisible = false;
        this.$refs['fromData'].resetFields()
      },
      // delUser
      delUserfn (index, row) {
        this.dialogVisible2 = true;
        this.fromData.userId = row.userId
      },
      upUserfn(row) {
        var parm = {
          id: row.userId,
          level: parseInt(row.value)
        }
        this.updateLevel(parm)
      },
      delFn(){
        var parm = {
          userId: this.fromData.userId
        }
        this.dialogVisible2 = false
        this.delUser(parm)
      },
      // 操作是否成功
      listStatus (res) {
        if (res.status == 0) {
          // 修改成功
          var text = '';
          if(res.code == 0){
            // 刷新列表
            text = this.languageData.id == 'Chinese'?'密码修改成功':'Password change successfully'
            this.fromData.password = ''
            this.fromData.passwordTow = ''
            this.openSuccess(text);
          }else {

            text = this.languageData.id == 'Chinese'?'删除账号成功':'Delete account successfully'
            if(res.code == 'updateLevel'){
              text = this.languageData.id == 'Chinese'?'设置成功':'updata successfully'
            }
            this.openSuccess(text);
            // 刷新列表
            var parm = {
              companyId:this.companyId,
              origin:this.fromData.origin,
              destination:this.fromData.destination,
              deviceNumber:this.fromData.deviceNumber,
              transStatus:this.fromData.transStatus,
              page: this.page.page,
              pageSize: this.page.pageSize,
            }
            this.statisticsTransOrder(parm);
          }
        }
        if (res.status != 0) {
          // 修改 修改失败
          var text = res.message
          if(res.code==-1){
            text = this.languageData.id == 'Chinese'?'密码修改失败':'Password change failed'
          }else {
            text = this.languageData.id == 'Chinese'?'删除账号失败':'Delete account failed'
          }
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 重置密码
      updatePaswordFn () {
        var parm = {
          userId: this.fromData.userId,
          password: this.fromData.password
        }
        this.resetPassword(parm);
        this.dialogFormVisible = false
      },
      // 表单验证按钮
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updatePaswordFn()
          } else {
            return false
          }
        })
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      backFn(){
        this.$router.go(-1)
      },
    },
    computed: {
      UserListData: function () {
        var parm = this.statisticsTransOrderList
        if (parm) {
          this.userListFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      stationlistD:function () {
        var parm = this.stationlist
        if (parm) {
         this.restaurant = parm
        }
        return 1
      },
      ...mapState([
        'addOderData',
        'language',
        'statisticsTransOrderList',
        'updateStatus',
        'stationlist'
      ])
    },
    mounted () {
      // 配置顶部菜单
      var that = this
      setTimeout(function () {
        that.restaurant =Public.publicLo.getCityFan('-1')
      },500)
      var parm = {
        companyId:this.companyId,
        origin:this.fromData.origin,
        destination:this.fromData.destination,
        deviceNumber:this.fromData.deviceNumber,
        transStatus:this.fromData.transStatus,
        page: this.page.page,
        pageSize: this.page.pageSize,
      }
      this.statisticsTransOrder(parm)
    },
    components: {
    }
  }
</script>

